<template>
  <div class="homeContainer">
    <!-- 顶部搜索导航栏区域 -->
    <van-nav-bar class="topNav" fixed>
      <template #title>
        <van-button type="info" size="small" round icon="search" to="/search">搜索</van-button>
      </template>
    </van-nav-bar>
    <!-- 标签导航栏区域 -->
    <!-- 通过 v-model 绑定当前激活标签对应的索引值，默认情况下启用第一个标签。 -->
    <van-tabs v-model="active" animated swipeable class="channel-tabs">
      <van-tab :key="item.id" v-for="item in channels" :title="item.name">
        <!-- 文章列表组件 -->
        <article-list :channel="item"></article-list>
      </van-tab>
      <div slot="nav-right" class="placeHolder"></div>
      <div slot="nav-right" class="hamburger-btn" @click="showPopup">
        <i class="iconfont icon-gengduo"></i>
      </div>
    </van-tabs>

    <!-- 编辑频道弹出层 -->
    <div class="editPopup">
      <van-popup v-model="show" closeable position="bottom" close-icon-position="top-left">
        <popup-content
          :my-channels="channels"
          :index-active="active"
          @toMyChannel="toMyChannel"
          @toggleChananel="toggleChananel"
          @deleteChananel="deleteChananel"
        ></popup-content>
      </van-popup>
    </div>
  </div>
</template>

<script>
// 导入获取频道列表的api
import { getMyChannels } from '@/assets/api/user.js'
// 导入添加频道的api
import { patchMuchannels, deleteMyChananels } from '@/assets/api/channel.js'
// 导入文章列表组件
import articleList from './components/artile-list.vue'
// 导入弹出层组件的内容
import popupContent from './components/popupContent.vue'
// 导入登入状态user
import { mapState } from 'vuex'
// 导入本地存储工具
import { setItem, getItem } from '@/assets/utils/storeage.js'

export default {
  name: 'homeIndex',
  data() {
    return {
      active: getItem('toutiao-active'),
      // 用户自己的频道列表
      channels: [],
      // 控制弹出层的开关
      show: false
    }
  },
  methods: {
    // 获取用户自己的频道列表
    async getMyChannel() {
      if (this.user) {
        try {
          const { data: res } = await getMyChannels()
          this.channels = res.data.channels
        } catch (err) {
          this.$toast.fail('获取自己频道列表失败')
        }
      } else {
        if (!getItem('toutiao-Chananel')) {
          const { data: res } = await getMyChannels()
          return (this.channels = res.data.channels)
        }
        this.channels = getItem('toutiao-Chananel')
      }
    },
    // 汉堡按钮-展示编辑频道弹出层
    showPopup() {
      this.show = true
    },
    // 添加频道功能由子组件传参
    async toMyChannel(val) {
      this.channels.push(val)

      // 数据持久化
      if (this.user) {
        // 如果登入存入服务器
        try {
          var res = await patchMuchannels({
            id: val.id,
            seq: this.channels.length
          })
        } catch {
          this.$toast.fail('添加失败')
        }
      } else {
        // 如果未登入存储到本地
        setItem('toutiao-Chananel', this.channels)
      }
    },
    // 切换频道功能由子组件传参
    toggleChananel(val) {
      const index = this.channels.findIndex((item) => {
        return val === item.id
      })
      this.active = index
      this.show = false
    },
    // 删除频道功能由子组件传参
    async deleteChananel(val, fixChannels) {
      const index = this.channels.findIndex((item) => {
        return val === item.id
      })

      // 固定频道不能删除
      if (fixChannels.includes(this.channels[index].id)) {
        return this.$toast('不能删除该频道')
      }
      this.channels.splice(index, 1)
      // 如果删除的是前面的项应该改变选重频道
      if (index <= this.active) {
        this.active--
      }

      // 数据持久化
      if (this.user) {
        // 如果登入存入服务器
        try {
          await deleteMyChananels(val)
        } catch {
          this.$toast.fail('删除失败')
        }
      } else {
        // 如果未登入存储到本地
        setItem('toutiao-Chananel', this.channels)
      }
    }
  },
  components: { 'article-list': articleList, 'popup-content': popupContent },
  mounted() {
    this.getMyChannel()
  },
  computed: {
    ...mapState(['user'])
  },
  watch: {
    active(val) {
      // 假的缓存
      setItem('toutiao-active', val)
    }
  }
}
</script>

// 只能做用于根节点
<style lang="less" scoped>
.article-list {
  // vw vh 视口单位指的是视口宽高的百分之一
  height: 100vh;
  overflow-y: auto;
  margin-bottom: 100px;
}

.topNav {
  // /deep/会深入到组件内部进行修改
  /deep/ .van-nav-bar__title {
    max-width: none;
  }
  .van-button {
    width: 555px;
    height: 64px;
    border: 0;
    background-color: #5babfb;
    font-size: 28px;
    .van-icon {
      font-size: 32px;
    }
  }
}

.channel-tabs {
  /deep/ .van-tabs__wrap {
    height: 82px;
  }
  /deep/ .van-tab {
    min-width: 200px;
    padding: 0;
    border-right: 1px solid #edeff3;
    font-size: 30px;
    color: #777;
  }
  /deep/ .van-tabs__wrap {
    border-bottom: 1px solid #edeff3;
    position: fixed;
    top: 46 * 2px;
    left: 0;
    right: 0;
    z-index: 1;
  }
  /deep/ .van-tab--active {
    color: #333;
  }
  /deep/ .van-tabs__nav {
    padding: 0;
    border-bottom: 1px solid #edeff3;
  }
  /deep/ .van-tabs__line {
    width: 31px;
    height: 6px;
    background-color: #3296fa;
    bottom: 8px;
  }
  .hamburger-btn {
    position: fixed;
    right: 0;
    width: 66px;
    height: 82px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    opacity: 0.902;
    .iconfont {
      font-size: 33px;
    }
    &:before {
      position: absolute;
      left: 0;
      width: 1px !important;
      content: '';
      width: 10px;
      height: 100%;
      background-image: url(~@/assets/img/gradient-gray-line.png);
      background-size: contain;
    }
  }
  .placeHolder {
    width: 66px;
    height: 82px;
    // 脱离flex计算
    flex-shrink: 0;
  }
  /deep/ .van-tabs__content {
    margin-top: 87 * 2px;
  }
}

.editPopup {
  .van-popup {
    height: 100%;
  }
}
</style>
